间距不靠手感：从四个基准值开始搭一套留白刻度

动手之前，先把三个数定死

第一个是基准单位，取 8px。不取 10 的原因很实际：常见的屏幕宽度 1280、1440、1920，常见的图标边长 16、24、32、48，都能被 8 整除，页面在 1.5 倍和 2 倍缩放下不会算出 0.5px 这样的小数，边框和分隔线也就不会发虚。表单、标签、徽章这类小组件如果 8px 显得太松，可以补一个 4px 的半档，但半档只允许出现在组件内部，模块与模块之间一律不许用。这条限制不写死，后面所有的间距表都会被慢慢撑开。

第二个是正文行高。纵向的所有数值最终都要和文字咬合，行高没定，段间距就没有参照物。正文 16px 时行高取 1.6 到 1.75，也就是 26 到 28px；中文笔画密度高于西文，低于 1.5 会明显发闷。行高确定后，段落之间的距离取行高的 0.75 到 1 倍，落到 8 的倍数上就是 24px。

第三个是内容区最大宽度。很多人抱怨页面空，实际问题恰恰相反：正文被拉满 1200px 通栏，一行塞进六十多个汉字，眼睛读到行尾往回扫时找不准下一行的起点，视觉上就散了。中文正文一行控制在 32 到 40 个字，对应 16px 字号约 520 到 680px。栅格可以照旧用 12 列 1200px，但纯文字段落必须单独限宽，这两件事不冲突。

第一步：把间距压缩到六到八档

先把 8 的倍数列出来：4、8、16、24、32、48、64、96、128。看着九档，真正需要保留的只有六到八档，多出来的要合并掉。分配方式是按用途绑定：4 和 8 用于图标与文字、按钮内的图文间隙；16 用于标题与紧随其后的正文；24 用于段落之间、列表项之间；32 用于卡片内边距；48 到 64 用于一个内容块结束到下一个小标题；96 到 128 只留给页面级模块之间。

校验方法很直接：打开已有的设计稿，用标注工具随机量二十处间距，把数值记下来。落在这张表里的应该不少于十八处。如果量出来的是 22、26、30、35 这种散值，说明之前是靠肉眼对齐的，此时不要逐个微调，直接把每个值就近归到表里的档位，一次性替换。做网页制作时最容易犯的错，就是发现某处不好看，单独给它加了个 27px，一个页面下来能攒出二十几种间距。

第二步：让间距表达关系，而不是填补位置

间距的作用是分组。距离近的元素会被读者默认为一伙的，距离远的则被理解为另起一段。所以数值不该按「这里看着空就减一点」来给，而要按元素之间的从属关系来给：标题和它自己的正文之间 8 到 16px，同层级的段落之间 24px，一个完整内容块到下一个小标题之间 48 到 64px，页面主要模块之间桌面端 80 到 120px、移动端 40 到 56px。相邻两级之间至少要差 1.5 倍，差得不够，层级就读不出来。

校验方法是把页面缩略成 200px 宽的小图，或者干脆眯起眼睛看，此时文字变成一片灰块。数一数能分辨出几个组，和你设计时想表达的组数对得上就算通过。数不出来，说明大值不够大，把模块间距往上提一档再看。这一步只花两三分钟，却比在网页制作里逐个像素微调有用得多。

第三步：纵向定完再补横向

横向数值单独列，别和纵向共用一套逻辑。容器左右内边距，桌面端 24 到 40px，移动端 16 到 20px，低于 16px 时手指容易误触到边缘元素；卡片内边距 24 到 32px，卡片圆角越大内边距要越大，12px 圆角配 24px 内边距，16px 圆角起步就得 32px，否则内容会顶到圆弧上；按钮内边距上下 12px、左右 24px，图标与文字之间固定 8px。

校验方法是把浏览器窗口从 1920px 一路拖到 360px，全程盯住三个位置：导航栏右侧的按钮、卡片里的长标题、表格的最后一列。这三处最容易在中间宽度贴边或被挤破。特别留意 768 到 1024 这一段，很多网页制作的项目只测了桌面和手机两个极端，平板横屏正好落在没人看过的区间里。

第四步：把数值写成变量，不要散落在样式里

在样式表根部声明一组变量，比如 --sp-1 到 --sp-7 依次对应 8、16、24、32、48、64、96，之后所有的 margin 和 padding 都引用变量。响应式不要写一堆断点，模块间距用 clamp(40px, 6vw, 96px) 这类写法，让它在 360px 到 1920px 之间连续变化，比在 768px 处硬切一刀自然。

校验方法是全局搜索样式文件里 margin 和 padding 后面跟着的裸数字，剩余数量应该低于总量的一成，剩下的那点通常是 1px 边框补偿和第三方组件覆盖，属于合理范围。搜出来还有五六十处，说明变量只是摆设，多人协作的网页制作项目里，总有人会绕过变量直接写数字。

常见问题与处理

模块单看都合适，拼在一起特别松。多半是每个模块自己带了上下各 80px 的外边距，相邻时两边叠加成 160px。处理办法是只给一个方向留外边距，统一用 margin-bottom，或者由父容器用 gap 统一控制，模块自身不带外边距。

移动端等比缩小之后要么挤要么空。间距不能等比缩放，纵向压掉 40% 到 50%，横向直接改成固定的 16px，字号则只降一到两级。桌面 96px 的模块间距，手机上给 48px 就够，按 0.3 倍算出来的 28px 会让两个模块糊在一起。

小标题看着黏在上一段末尾。这是标题上下间距写成相同值造成的，改成上间距是下间距的 2 到 3 倍，比如上 48px、下 16px，标题就会明确归属于它下面的内容。

设计稿看着没问题，做出来对不上。设计工具里自动布局的 gap 和 CSS 的普通块级元素外边距行为不同，后者相邻时会发生外边距折叠，48px 和 24px 相邻实际只呈现 48px。用 flex 或 grid 的 gap 就不会折叠，网页制作交付时最好在标注里写清用哪一种。

改一个间距要动二十个页面。这是没走变量的必然结果，也说明当初的网页制作是按页面而不是按组件组织的，越早回头改造成本越低。

上线前的六条自查

一、随机量二十处间距，非表内数值不超过两处。二、缩略图状态下能数清页面分了几个大组。三、窗口从 1920px 拖到 360px，无元素贴边、无横向滚动条。四、所有小标题的上间距大于下间距，比例在 2 到 3 倍之间。五、样式文件里裸数字占比低于一成。六、正文段落单行字数在 32 到 40 字之间，超出的段落已单独限宽。六条里有两条不过，就别急着提交，回到第一步重新对表。